<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统的访问更加容易
    // 说白了，就是重新封装，达到应对各种情况的模式
    // 这种包装不仅仅是为了简单的调用接口，还可以处理兼容问题
//    外观模式实现
    function addEvent (dom,type,fn) {
    //  对于支持DOM2级事件处理程序addEventListener 方法的浏览器
      if(dom.addEventListener){
        dom.addEventListener(type,fn,false)
      //  对于不支持addEventListener 方法但是支持attachEvent的浏览器
      }else if(dom.attachEvent){
        dom.attachEvent('on'+type,fn);
      //  对于都不支持的浏览器
      }else{
        dom['on'+type] = fn
      }
    }
//    外观模式调用
    let myInput = document.getElementById('myInput')
    addEvent(myInput,'click',function (){
      console.log('我是点击事件')
    })
    addEvent(myInput,'move',function (){
      console.log('我是移动事件')
    })
</script>
</body>
</html>
